<template>
    <div>
        <common-header></common-header>

        <div style="width:1200px; margin: 50px auto;">
            <div class="row">
                <div class="col-md-3">
                    <!-- 账号安全侧栏 -->
                    <safe-nav :activeId="activeId"></safe-nav>
                </div>
                <div class="col-md-9">
                    <el-card class="accountCard" shadow="hover">
                        <div class="titleWrap">
                            <div>基本信息</div>
                            <div :class="[isForm ? 'isNone': '']"><el-button type="primary" size="small" plain icon="el-icon-edit" @click="isEdit()">修改</el-button></div>
                        </div>
                        <div>
                            <div class="formShow" :v-loading="isloading">
                                <el-form :model="detailForm" :rules="detailRules" label-position="right" label-width="85px">
                                    <el-form-item
                                        v-for="(item, index) in detailFormLabel" :key="index"
                                        :label="item.label" :prop="item.model" size="small">
                                        <span v-if="isForm">
                                            <el-input v-model="detailForm[item.model]" size="small" v-if="item.type === 'input'"></el-input>
                                            <el-radio-group v-model="detailForm[item.model]" v-if="item.type === 'radio'">
                                                <el-radio v-for="rad in item.rads" :key="rad.value" :label="rad.value">{{rad.label}}</el-radio>
                                            </el-radio-group>
                                        </span>
                                        <span v-else-if="detailForm[item.model] === 0">男</span>
                                        <span v-else-if="detailForm[item.model] === 1">女</span>
                                        <span v-else>{{detailForm[item.model]}}</span>
                                    </el-form-item>
                                    <el-form-item style="margin-top: 12px;" :class="[isForm ? '': 'isNone']">
                                        <el-button type="primary" size="mini" style="width:12%;margin-right:10px;" @click="editUserInfo()">保 存</el-button>
                                        <el-button size="mini" style="width:12%;" @click="isForm = false">取 消</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                    <div style="color: rgb(152, 152, 152);margin:10px 0 0 20px;font-size:12px;">
                        * 我们确保你所提供的信息均处于严格保密状态，不会泄露
                    </div>
                </div>
            </div>
        </div>

        <common-footer></common-footer>
    </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import SafeNav from '../../components/Safe/SafeNav'

import {mapState} from 'vuex'
export default {
    components:{
        CommonHeader,
        CommonFooter,
        SafeNav
    },
    computed:{
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    data(){
        return {
            activeId: 0,
            isForm: false,
            detailForm:{
                // username: '轩忆',
                // sex: 0,
                // age: 22,
                // phone: '15666666666',
                // email: 'te1st@qq.com',
                // address: '阳江市阳东区'
            },
            detailFormLabel:[
                {
                    label: '昵称：',
                    model: 'username',
                    rule: 'username',
                    type: 'input'
                },
                {
                    label: '性别：',
                    model: 'sex',
                    rule: 'sex',
                    type: 'radio',
                    rads:[
                        {
                            label: '男',
                            value: 0
                        },
                        {
                            label: '女',
                            value: 1
                        }
                    ]
                },
                {
                    label: '年龄：',
                    model: 'age',
                    rule: 'age',
                    type: 'input'
                },
                {
                    label: '手机号码：',
                    model: 'phone',
                    rule: 'phone',
                    type: 'input'
                },
                {
                    label: '用户邮箱：',
                    model: 'email',
                    rule: 'email',
                    type: 'input'
                },
                // {
                //     label: '收货地址：',
                //     model: 'address',
                //     rule: 'address',
                //     type: 'input'
                // }
            ],
            detailRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' }
                ],
                phone: [],
                email: [],
                address: []
            },
            isloading: false    // 控制加载动画
        }
    },
    methods:{
        isEdit(){
            this.isForm = !this.isForm
        },
        // 获取用户信息
        async getUserInfo(){
            const {data:res} = await this.$http.get('/user/info')
            console.log('用户信息：', res)
            if(res.code == 200){
                this.$store.commit('setUserInfo', res.data)
                this.detailForm = res.data
            }
        },
        // 编辑用户信息
        async editUserInfo(){
            var updateUserInfoForm = {
                id: this.detailForm.id,
                username: this.detailForm.username,
                email: this.detailForm.email,
                phone: this.detailForm.phone,
                age: this.detailForm.age,
                sex: this.detailForm.sex
            }
            console.log('编辑用户信息表单:', updateUserInfoForm)
            const {data:res} = await this.$http.post('/user/update', updateUserInfoForm)
            console.log('编辑用户:', res)
            if(res.code === 200){
                this.isForm = false
                this.$store.commit('setUserInfo', updateUserInfoForm)
                return this.$message.success('用户信息修改成功！')
            }
            return this.$message.error('用户信息编辑失败！')
        }
    },
    created(){
        if(window.sessionStorage.getItem('token')){
            if(this.userInfo){
                this.detailForm = this.userInfo
            }else{
                this.getUserInfo()
            }
        }
        
    }
}
</script>

<style lang="less" scoped>
.isNone{
    display: none;
}
.accountCard{
    min-height: 420px;
    padding: 10px 30px;
    .titleWrap{
        display: flex;
        justify-content: space-between;
    }
    .formShow{
        margin-top: 25px;
        /deep/.el-form-item{
            margin: 0;
            .el-form-item__label{
                color: #979797;
            }
            .el-input{
                width: 85%;
            }
        }
    }
}
</style>